<template>
  <u-popup
    v-model="pageData.show"
    mode="bottom"
    border-radius="24"
    :z-index="121"
    safe-area-inset-bottom
  >
    <view class="popup-body">
      <view class="popup-title"> 预约日历 </view>
      <view class="close-icon" @click="closePopup">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>

      <view class="calendar-sction">
        <uni-calendar
          :selected="selected"
          ref="calendar"
          class="uni-calendar--hook"
          :clear-date="true"
          :insert="true"
          :lunar="false"
          :startDate="getCurrentDate"
          :endDate="getEndDate"
          :range="true"
          :disable-before="true"
          @change="calendarChange"
        />
        <view class="shop-num">
          <view class="shop-num-text"> 数量 </view>
          <view>
            <u-number-box
              v-model="pageData.num"
              @change="numChange"
            ></u-number-box>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="foot-btns" v-if="footConfig">
        <view
          class="foot-content"
          :class="['footsStyle' + footConfig.params.styleType]"
        >
          <view
            class="buy-btn"
            :style="{
              color: footConfig.params.buyBtn.color,
              backgroundColor: footConfig.params.buyBtn.bgColor,
            }"
            @click="submit"
          >
            {{ footConfig.params.buyBtn.text }}</view
          >
        </view>
        <view class="safe"></view>
      </view>
    </view>
  </u-popup>
</template>
<script>
import uniCalendar from "./uni-calendar/uni-calendar.vue";

export default {
  components: {
    uniCalendar,
  },
  data() {
    return {
      pageData: {
        show: false,
      },
      selected: [], //价格数组用于展示
      selectData: {}, //选中的时间
      footConfig: null,
    };
  },
  mounted() {
    let [config] = this.diyTemplates.filter((d) => {
      return d.comName == "goodsFootNav";
    });
    if (config) this.footConfig = config;
  },
  methods: {
    // 提交预约时间
    submit() {
      // 已选时间
      if (this.selectData.range) {

        var endDate = this.selectData.range.after.split("-").map((item) => {
          return item * 1;
        });
        var startDate = this.selectData.range.before.split("-").map((item) => {
          return item * 1;
        });
        endDate = `${endDate[0]}-${endDate[1]}-${endDate[2]}`;
        startDate = `${startDate[0]}-${startDate[1]}-${startDate[2]}`;
        var reject = this.isNum([startDate, endDate], this.pageData.num);
        // 库存不足
        if (!reject[1])
          return uni.showToast({
            title: `${reject[0].date}库存不足`,
            icon: "none",
          });
        this.$emit("submitHotel", reject[0]);
      } else {
        uni.showToast({
          title: "请选择预约时间",
          icon: "none",
        });
      }
    },
    // 预约时间发生改变
    calendarChange(v) {
      // 判断是否选择时间
      if (v.range.after && v.range.before) {
        this.selectData = v;
      } else {
        this.selectData = {};
      }
    },
    numChange(e) {
      this.pageData.num = e.value;
    },
    // 关闭弹框
    closePopup() {
      this.pageData.show = false;
    },
    // 判断库存
    isNum(selectDate, num) {
      var list = this.pageData.date_book.date_book,
        startIndex = 0,
        endIndex = 0;

      // 获取索引
      for (let i = 0; i < list.length; i++) {
        if (
          new Date(list[i].date).getTime() == new Date(selectDate[0]).getTime()
        ) {
          if (selectDate[0] == selectDate[1]) {
            startIndex = i;
            endIndex = i;
            break;
          } else {
            startIndex = i;
          }
        } else if (
          new Date(list[i].date).getTime() == new Date(selectDate[1]).getTime()
        ) {
          endIndex = i;
          break;
        }
      }

      // 获取选中时间数组
      if (startIndex == endIndex) {
        var newList = list.slice(startIndex, startIndex + 1);
      } else {
        var newList = list.slice(startIndex, endIndex + 1);
      }
      // 判断库存
      for (let i = 0; i < newList.length; i++) {
        if (parseInt(newList[i].num) < num) {
          return [newList[i], false];
        }
      }
      return [newList, true];
    },
  },
  props: {
    hotelData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    diyTemplates: {
      type: Array,
      default: [],
    },
  },
  watch: {
    hotelData: {
      handler: function (val, olval) {
        this.pageData = val;

        // 设置日期下展示价格
        let arr = [];
        val.date_book.date_book.forEach((item) => {
          let obj = {};
          for (var v in item) {
            if (v != "price") {
              obj[v] = item[v];
            } else {
              obj["info"] = item[v];
            }
          }
          arr.push(obj);
        });
        this.selected = arr;
      },
    },
    pageData: {
      handler: function (val) {
        this.$emit("pageDataChange", val);
      },
      deep: true,
    },
  },
  computed: {
    // 当前时间
    getCurrentDate() {
      return this.pageData.date_book?.date_book[0].date;
    },
    // 结束时间
    getEndDate() {
      if (this.pageData.date_book) {
        var i = this.pageData.date_book.date_book.length - 1;
        return this.pageData.date_book.date_book[i].date;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.popup-body {
  width: 100%;
  background-color: #ffffff;
  padding-top: 4.26vw;
  height: 80vh;
  position: relative;
  .popup-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
    margin-left: 4.8vw;
    padding-bottom: 4.267vw;
  }

  .close-icon {
    width: 14.93vw;
    height: 14.93vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-box {
      width: 5.34vw;
      height: 5.34vw;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f1f2;
      .iconfont {
        color: #8c8c8c;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }

  .calendar-sction {
    padding: 0 4.8vw;
    height: 106.13vw;
    overflow-y: scroll;
    .shop-num {
      margin-top: 2.67vw;
      padding: 0 1.6vw;
      height: 9.86vw;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .shop-num-text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
    }
  }

  .foot-btns {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 121;
    border-top: 1px solid #f0f1f3;
    .foot-content {
      width: 100%;
      height: 13.34vw;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 4.8vw;
      .buy-btn {
        width: 90.4vw;
        height: 10.13vw;
        border-radius: 5.065vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        background-color: #f22407;
      }
    }

    .safe {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
